$(function () {
  var data = [
      {name: '安置房', id: 1},
      {name: '公租房', id: 2},
      {name: '限价房', id: 3},
      {name: '人才房', id: 4},
      {name: '廉租房', id: 5},
      {name: '安置房', id: 6},
      {name: '其他', id: 7}
    ],
    fnBack = function (result) {
      console.log(result.name + ' ' + result.id);
    };
  new SelectBox($('#rightSelect1'), data, fnBack,
    {
      color: '#fff',//输入框字体颜色
      optionColor: '#fff',//下拉框字体颜色
      arrowColor: '#fff',//箭头颜色
      backgroundColor: '#7916ff',//背景色颜色
      borderColor: '#7916ff',//边线颜色
      hoverColor: '#7916ff',//下拉框HOVER颜色
      borderWidth: 1,//边线宽度
      defalut: 'firstData',//默认显示内容。如果是'firstData',则默认显示第一个
      arrowBorderWidth: 0,//箭头左侧分割线宽度。如果为0则不显示
      borderRadius: 5,//边线圆角
      height: 30,//高
      width:95,
      textIndent:7,
      placeholder: 'box6',//默认提示
    }
   );

  let list = [{
    name: "待建设",
    value: "9"
  }, {
    name: "建设中",
    value: "50"
  }, {
    name: "已投放",
    value: "30"
  }]

  let sum = 0;
  list.map((item, index) => {
    sum += parseInt(item.value)
  })

  list.push({name:'',value:sum})
  let colorList = ['#FF8F1F', '#7916ff', '#008C28',"rgba(0,0,0,0)"]

  let rightBoxOptions = {
    tooltip: {},
    color: colorList,
    legend: {
      orient: 'horizontal',
      x:'center',
      y:170,
      icon: "circle",
      itemGap:25,
      textStyle: {
        color: '#fff',
        fontSize:14,
        fontWeight: 400
      },
    },
    lineHeight:26,
    series: [{
      name: "",
      type: "pie",
      hoverAnimation: false,
      startAngle: -180,
      radius: ["50%", "90%"],
      center: ["50%", "60%"],
      lineHeight:40,
      tooltip:{
        show: true, // 是否显示
        padding: 0,
        textStyle: { // 提示框浮层的文本样式。
          color: '#fff',
          fontStyle: 'normal',
          fontWeight: 'normal',
          fontFamily: 'sans-serif',
          fontSize: 14,
        },
        normal: {
          formatter: function (params) {
            if (!params.data.name) {
              return ''
            }
            return `${params.data.name}\n{b|${params.percent}%}`;
          },
          rich: {
            b: {
              color: '#fff',
              lineHeight: 18,
              fontSize: 12,
              align: 'left',
            },
          }
        }
      },
      label: {
        normal: {
          formatter: function (params) {
            if(!params.data.name){ return '' }
            return `${params.data.name}\n{b|${params.percent}%}`;
          },
          rich:{
            b:{
              color: '#fff',
              lineHeight: 18,
              fontSize: 12,
              align: 'left',
            },
          },
          color: "#fff",
          show: true,
          padding: [-10, 0, 0, 0],
        },
      },
      labelLine: {
        normal: {
          length: 1,
          length2:5,
          lineStyle:{
            color:'#fff',
          },
          maxSurfaceAngle: 80,
          show: false,
        },
      },
      data: list,
      itemStyle: {
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
    }, ],
  };

  var rightPart1Dom = document.getElementById('rightPart1');
  let rightPart1Chart = echarts.init(rightPart1Dom);

  rightPart1Chart.setOption(rightBoxOptions)

  window.addEventListener('resize',function () {
    rightPart1Chart.setOption(rightBoxOptions)
  })

  var data1 = [
      {name: '2022年度', id: 1},
      {name: '2021年度', id: 2},
      {name: '2020年度', id: 3},
      {name: '2019年度', id: 4}
    ],
    fnBack1 = function (result) {
      console.log(result.name + ' ' + result.id);
    };
  new SelectBox($('#rightSelect2'), data1, fnBack1,
    {
      color: '#fff',//输入框字体颜色
      optionColor: '#fff',//下拉框字体颜色
      arrowColor: '#fff',//箭头颜色
      backgroundColor: '#7916ff',//背景色颜色
      borderColor: '#7916ff',//边线颜色
      hoverColor: '#7916ff',//下拉框HOVER颜色
      borderWidth: 1,//边线宽度
      defalut: 'firstData',//默认显示内容。如果是'firstData',则默认显示第一个
      arrowBorderWidth: 0,//箭头左侧分割线宽度。如果为0则不显示
      borderRadius: 5,//边线圆角
      height: 30,//高
      width:111,
      textIndent:7,
      placeholder: 'box6',//默认提示
    }
  );

  $('#rightSelect3').on('click',function () {
    $('#dialogBg').show();
    $('#dialog2').css('visibility',"visible").removeClass('modal-leave-active').addClass('modal-enter-active')
  })

  $('.right-search-btn').on('click',function () {
    $('#dialogBg').show();
    $('#dialog1').css('visibility',"visible").removeClass('modal-leave-active').addClass('modal-enter-active')
  })

  $('#rightSelect4').on('click',function () {
    $('#dialogBg').show();
    $('#dialog3').css('visibility',"visible").removeClass('modal-leave-active').addClass('modal-enter-active')
  })

  $('.dialog-close').on('click',function () {
    $('#dialogBg').hide();
    $(this).parent().parent().removeClass('modal-enter-active').addClass('modal-leave-active').delay(200).css('visibility',"hidden");
  })
});